import { useEffect } from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import RouterBeforeEach from "./RouterBeforeEach";
import { useSelector, useDispatch } from "react-redux";
import { add } from "@/redux/todolistSlice";

function Home(props) {
  const { list } = useSelector((state) => state.todo);
  const dispatch = useDispatch();
  useEffect(() => {
    console.log("list->", list);
  }, []);

  function addHandler() {
    dispatch(add("手动添加数据"));
  }

  const navigate = useNavigate();
  const location = useLocation();
  // console.log(location.pathname);
  // useEffect(() => {
  //   console.log(11);
  //   navigate("/page2");
  // }, [location.pathname, navigate]);

  const goPage = () => {
    navigate("/page2", {
      state: {
        alert: "测试数据 ",
      },
    });
    // navigate("/page1", {
    //   state: {
    //     alert: "测试数据 ",
    //   },
    // });

    // navigate("/home/about/1", {
    //   state: {
    //     alert: "测试数据 ",
    //   },
    // });

    // navigate("/home/test", {
    //   state: {
    //     alert: "测试数据 ",
    //   },
    // });
  };
  return (
    <div onClick={goPage}>
      <div>home</div>
      <div onClick={addHandler}>添加数据</div>
      <RouterBeforeEach>
        <Outlet />
      </RouterBeforeEach>
    </div>
  );
}

export default Home;
